<!DOCTYPE html>
<html>
{% load staticfiles %}

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>慕学在线网登录</title>
  <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
  <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
<div class="dialog" id="jsDialog">
  <!--提示弹出框-->
  <div class="successbox dialogbox" id="jsSuccessTips">
    <h1>成功提交</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="cont">
      <h2>您的需求提交成功！</h2>
      <p></p>
    </div>
  </div>
  <div class="noactivebox dialogbox" id="jsUnactiveForm">
    <h1>邮件验证提示</h1>
    <div class="close jsCloseDialog"><img src="/static/images/dig_close.png"/></div>
    <div class="center">
      <img src="/static/images/send.png"/>
      <p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">12@13.com</span>发送了邮件，<br/>为保证您的账号安全，请及时验证邮箱</p>
      <p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
      <p class="zy_success upmove"></p>
      <p style="display: none;" class="sendE2">没收到，您可以查看您的垃圾邮件和被过滤邮件，也可以再次发送验证邮件（<span class="c5c">60s</span>）</p>
      <p class="sendE">没收到，您可以查看您的垃圾邮件和被过滤邮件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin"
                                                           style="cursor: pointer;">再次发送验证邮件</span></p>
    </div>
  </div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
  <div class="c-box fff-box">
    <div class="wp header-box">
      <p class="fl hd-tips">慕学在线网，在线学习平台！</p>
      <ul class="fr hd-bar">
        <li>服务电话：<span>33333333</span></li>
        <li class="active"><a href="{% url 'login' %}">[登录]</a></li>
        <li><a href="{% url 'register' %}">[注册]</a></li>
      </ul>
    </div>
  </div>
</header>
<section>
  <div class="c-box bg-box">
    <div class="login-box clearfix">
      <div class="hd-login clearfix">
        <a class="index-logo" href="index.html"></a>
        <h1>用户登录</h1>
        <a class="index-font" href="/">回到首页</a>
      </div>
      <div class="fl slide">
        <div class="imgslide">
          <ul class="imgs">
            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg"/></a></li>
            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg"/></a></li>
            <li><a href=""><img width="483" height="472" src="/static/images/mysql.jpg"/></a></li>
          </ul>
        </div>
        <div class="unslider-arrow prev"></div>
        <div class="unslider-arrow next"></div>
      </div>
      <div class="fl form-box">
        <div class="tab">
          {% if dynamic_login %}
            <h2>账号登录</h2>
            <h2 class="active">动态登录</h2>
          {% else %}
            <h2 class="active">账号登录</h2>
            <h2>动态登录</h2>
          {% endif %}
        </div>
        <form class="tab-form {% if dynamic_login %}hide{% endif %}" action="{% url 'login' %}" method="post" autocomplete="off" id="form1">
          {% csrf_token %}
          <div class="form-group marb20 {% if login_form.errors.username %}
          errorput
          {% endif %} ">
            <input name="username" id="account_l" type="text" placeholder="手机号/邮箱"
                   value="{{ login_form.username.value }}"/>
          </div>
          <div class="form-group marb8 {% if login_form.errors.password %}
          errorput
          {% endif %} ">
            <input name="password" id="password_l" type="password" placeholder="请输入您的密码"
                   value="{{ login_form.password.value }}"/>
          </div>
          <div class="error btns login-form-tips" id="jsLoginTips">
            {% if not dynamic_login and login_form.errors %}
              {% for key, error in login_form.errors.items %}
                {{ error }}
              {% endfor %}
            {% else %}
              {{ msg }}
            {% endif %}
          </div>
          <div class="auto-box marb38">
            <a class="fr" href="forgetpwd.html">忘记密码？</a>
          </div>
          <input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > "/>
        </form>
        <form class="tab-form {% if dynamic_login %}{% else %}hide{% endif %}" id="mobile_register_form" action="{% url 'd_login' %}" autocomplete="off" method="post" id="form2">
          {% csrf_token %}

          <div class="form-group marb20">
            <input id="jsRegMobile" name="mobile" type="text" value="{{ login_form.mobile.value|default_if_none:'' }}" placeholder="请输入您的手机号码">
          </div>
          <div class="form-group marb20 blur" id="jsRefreshCode">
            {{ login_form.captcha }}
            {{ d_form.captcha }}
          </div>
          <div class="clearfix">
            <div class="form-group marb8 verify-code">
              <input id="jsPhoneRegCaptcha" name="code" type="text" value="{{ login_form.code.value }}" placeholder="输入手机验证码">
            </div>
            <input class="verify-code-btn sendcode" id="jsSendCode"  data-is-register="false" value="发送验证码">
          </div>
          <div class="error btns" id="jsMobileTips">
            {% if dynamic_login and login_form.errors %}
              {% for key, error in login_form.errors.items %}
                {{ error }}
              {% endfor %}
            {% else %}
              {{ msg }}
            {% endif %}
          </div>
          <div class="auto-box marb8">
          </div>
          <input class="btn btn-green" id="jsMobileRegBtn" type="button" value="立即登录">
        </form>
        <p class="form-p">没有慕学在线网帐号？<a href="{% url 'register' %}">[立即注册]</a></p>
      </div>
    </div>
  </div>
</section>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.js' %}" type="text/javascript"></script>
<script src="{% static 'js/validateDialog.js' %}" type="text/javascript"></script>
<script src="{% static 'js/login.js' %}" type="text/javascript"></script>
</body>
</html>
